<template>
  <body class="TutorialPage">
    <div class="Navigationbox">
      <!-- <i
        class="bx bx-undo bx-fade-left-hover bx-md"
        style="color: #fff; margin-left: 40px; margin-top: -5px"
        @click="BackToPrevious"
      ></i> -->
      <el-icon
        style="color: #fff; padding-top: 5px; font-size: 25px"
        @click="BackToPrevious"
        ><Back
      /></el-icon>
      <nav class="navigation">
        <a style="margin-left: 10px; font-size: 22px">back </a>
      </nav>
    </div>
    <div class="showVideobox">
      <video
        v-if="videoUrls.length > 0"
        :src="currentVideoUrl"
        controls
        width="640"
        height="360"
        class="showVideo"
      >
        <source :src="currentVideoUrl" type="video/mp4" />
      </video>
      <div class="selectVideobutton">
        <!-- <div @click="showPreviousVideo">
          <i class="bx bxs-chevron-left bx-fade-left-hover bx-lg"></i>
        </div> -->
        <el-icon
          style="color: #fff; padding-top: 10px; font-size: 30px"
          @click="showPreviousVideo"
          ><ArrowLeftBold
        /></el-icon>
        <!-- <div @click="showNextVideo">
          <i class="bx bxs-chevron-right bx-fade-right-hover bx-lg"></i>
        </div> -->
        <el-icon
          style="color: #fff; padding-top: 10px; font-size: 30px"
          @click="showNextVideo"
          ><ArrowRightBold
        /></el-icon>
      </div>
      <div class="VideoTitle1">This video shows:</div>
      <div class="VideoTitle2">{{ currentVideoTitle }}</div>
    </div>
    <div class="videolistbox">
      <div class="selectVideoType">
        <nav class="navigation" @click="getWordsUrl">
          <a style="margin-left: 0px">words</a>
        </nav>
        <nav class="navigation" @click="getSentencesUrl">
          <a style="margin-left: 0px">sentences</a>
        </nav>
      </div>
      <div class="showVideoList">
        <div
          class="VideoList"
          v-for="(videoList, index) in videoList"
          :key="index"
          @click="SelectVideo(index)"
          :style="{ color: currentVideoIndex === index ? '#c4d9ea' : 'white' }"
        >
          {{ videoList }}
        </div>
      </div>
    </div>
  </body>
</template>

<script>
export default {
  data() {
    return {
      videoUrls: [],
      videoList: [],
      currentVideoIndex: 0,
      currentVideoTitle: "",
      VideoType: 0,
      selectVT: 0,
    };
  },
  computed: {
    currentVideoUrl() {
      if (this.videoUrls.length > 0) {
        return this.videoUrls[this.currentVideoIndex];
      }
      return "";
    },
  },
  methods: {
    getWordsUrl() {
      this.selectVT = 0;
      this.GetVideoList();
    },
    getSentencesUrl() {
      this.selectVT = 1;
      this.GetVideoList();
    },
    GetVideoList() {
      const params = new URLSearchParams();
      params.append("selectVT", this.selectVT);
      this.axios
        .post("http://127.0.0.1:8000/get_video_list/", params)
        .then((res) => {
          console.log(res.data.success);
          this.videoUrls = res.data.data.map((video) => video.url);
          this.videoList = res.data.data.map((video) => video.name);
          console.log(res.data);
          this.currentVideoTitle = this.videoList[this.currentVideoIndex];
        })
        .catch((error) => {
          console.error("Error:", error);
        });
    },
    showPreviousVideo() {
      if (this.currentVideoIndex >= 0) {
        this.currentVideoIndex--;
        this.currentVideoTitle = this.videoList[this.currentVideoIndex];

        if (this.currentVideoIndex < 0) {
          this.currentVideoIndex = this.videoUrls.length - 1;
          this.currentVideoTitle = this.videoList[this.currentVideoIndex];
        }
      }
    },
    showNextVideo() {
      if (this.currentVideoIndex <= this.videoUrls.length - 1) {
        this.currentVideoIndex++;
        this.currentVideoTitle = this.videoList[this.currentVideoIndex];

        if (this.currentVideoIndex == this.videoUrls.length) {
          this.currentVideoIndex = 0;
          this.currentVideoTitle = this.videoList[this.currentVideoIndex];
        }
      }
    },
    SelectVideo(index) {
      this.currentVideoIndex = index;
      this.currentVideoTitle = this.videoList[this.currentVideoIndex];
    },
    BackToPrevious() {
      this.$router.push({
        path: "/login_signup",
      });
    },
  },
  mounted() {
    this.GetVideoList();
  },
};
</script>

<style>
@import url("https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.TutorialPage {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: 50px 1fr;
  overflow: auto;
  background: url("../statics/background.jpg") no-repeat;
  background-size: cover;
  background-position: center;
}
.Navigationbox {
  background-color: #152735;
  grid-column: 1 / 3;
  width: 100%;
  height: 50px;
  display: flex;
  padding-top: 10px;
  padding-left: 10px;
}
.space {
  height: 10px;
  width: 100%;
}
.BackButton {
  position: absolute;
  left: 0;
  margin-top: 20px;
  background-color: white;
}
.showVideobox {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  /* background-color: #c4d9ea; */
  /* backdrop-filter: blur(10px); */
}
.showVideo {
  position: relative;
}
.videolistbox {
  position: relative;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 10px;
}
.selectVideoType {
  height: 50px;
  display: flex;
  grid-template-rows: 1fr;
  justify-content: space-evenly;
  align-items: center;
  background: linear-gradient(#fff2, transparent);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
}
.VideoType {
  flex: 1;
  border-radius: 0px;
}
.showVideoList {
  position: relative;
  font-size: 20px;
  padding-left: 20px;
  padding-right: 20px;
  height: calc(100vh - 100px);
  max-height: calc(100vh - 100px);
  overflow: auto;
  background: linear-gradient(#fff2, transparent);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
}
.selectVideobutton {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  width: 40%;
}
.VideoList {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.VideoTitle1 {
  font-size: 30px;
  width: 100%;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  font-weight: bold;
}
.VideoTitle2 {
  font-size: 25px;
  width: 100%;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}
</style>
